<template>
  <basic-container>
    <!-- START goBack -->
    <div class="el-page-header haruyuki-mb-20">
      <div
        class="el-page-header__left haruyuki-flex-center haruyuki-size-18"
        @click="goBack"
      >
        <i class="el-icon-arrow-left"></i>
        <div class="haruyuki-size-16">返回</div>
      </div>
      <div class="el-page-header__content">商户详情</div>
    </div>
    <!-- END goBack -->
    <section class="haruyuki-bg-color-white">
      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-user"></i><span class="haruyuki-ml-6">{{ posTitle.basicTitle }}</span>
        </div>
        <!-- <el-button
          type="primary"
          icon="el-icon-edit"
          size="small"
          @click="informEdit(basicForm.id)"
          >修改</el-button
        > -->
      </div>
      <div class="haruyuki-content">
        <div class="merchant-box adaptive">
          <div class="merchant-item-content">
            <span>商户号：{{ basicForm.rpiNo }}</span>
            <span>商户类型：{{ basicForm.userTypeName }}</span>
            <span>行业类型：{{ basicForm.ysMerchantType }}/{{ basicForm.industryName }}/{{ basicForm.mccCdName }}</span>
            <span>注册名称：{{ basicForm.registeredName }}</span>
            <span>门头名称：{{ basicForm.rpiName }}</span>
            <!-- <span>商户简称：{{ basicForm.userShortName }}</span> -->
            <span class="haruyuki-line-3">经营范围：{{ basicForm.businessScope }}</span>
            <span>注册资金：{{ basicForm.businessRegisteredCapital }}</span>
            <span>所在区域：{{ basicForm.mercProv }}/{{ basicForm.mercCity }}/{{ basicForm.mercArea }}</span>
            <span>经营地址：{{ basicForm.contactsAddr }}</span>
            <span>服务商：{{ basicForm.serName }}</span>
            <span>客户经理：{{ basicForm.accountManagerName }}</span>
          </div>
          <div class="merchant-item-content">
            <span>法人姓名：{{ basicForm.legalPersonName }}</span>
            <span>法人性别：{{ basicForm.crpGenderName }}</span>
            <span>法人电话：{{ basicForm.legalPersonPhone }}</span>
            <span>法人职业：{{ basicForm.crpProfessionName }}</span>
            <span>法人职务：{{ basicForm.crpProfessionLittleName }}</span>
            <span>法人身份证号：{{ basicForm.legalPersonId }}</span>
            <span>法人身份证有效期：{{ basicForm.legalPersonIdSdate }} 至 {{ basicForm.legalPersonIdEdate }}</span>
            <span>法人省市区：{{ basicForm.legalProvinceName }}/{{ basicForm.legalCityName }}/{{ basicForm.legalAreaName }}</span>
            <span>法人地址：{{ basicForm.crpAddr }}</span>
            <span>社会信用代码：{{ basicForm.businessLicenceNo }}</span>
            <span v-if="basicForm.businessLicenceSDate"
              >营业执照有效期：{{ basicForm.businessLicenceSDate }} 至
              {{ basicForm.businessLicenceEDate }}</span
            >
          </div>
          <div class="merchant-item-content">
            <span>联系人姓名：{{ basicForm.contactsName }}</span>
            <span>联系人性别：{{ basicForm.contactsGenderName }}</span>
            <span>联系人身份证号：{{ basicForm.contactPersonId }}</span>
            <span>联系人身份证有效期：{{ basicForm.idValiddateBegin }} 至 {{ basicForm.idValiddateEnd }}</span>
            <span>联系方式：{{ basicForm.contactsPhone }}</span>
            <span>联系人邮箱：{{ basicForm.contactsEmail }}</span>
            <template v-if="basicForm.holdPrsnIsLegal == '0'">
              <span>控股人姓名：{{ basicForm.holdPrsnCertName }}</span>
              <span>控股人联系方式：{{ basicForm.holdPrsnMobile }}</span>
              <span>控股人性别：{{ basicForm.holdPrsnGenderName }}</span>
              <span>控股人身份证号：{{ basicForm.holdPrsnCertNo }}</span>
              <span>控股人身份证有效期：{{ basicForm.holdPrsnCertMfgDate }} 至 {{ basicForm.holdPrsnCertExpDate }}</span>
            </template>
            <template v-if="basicForm.receiptorIsLegal == '0'">
              <span>受益人姓名：{{ basicForm.receiptorName }}</span>
              <span>受益人联系方式：{{ basicForm.receiptorMobile }}</span>
              <span>受益人性别：{{ basicForm.receiptorGenderName }}</span>
              <span>受益人身份证号：{{ basicForm.receiptorCertNo }}</span>
              <span>受益人身份证有效期：{{ basicForm.receiptorCertMfgDate }} 至 {{ basicForm.receiptorCertExpDate }}</span>
              <span>受益人所在区域：{{ basicForm.receiptorProvCodeName }}/{{ basicForm.receiptorCityCodeName }}/{{ basicForm.receiptorCountyCodeName }}</span>
              <span>受益人详细地址：{{ basicForm.receiptorAdderss }}</span>
            </template>
          </div>
        </div>
        <el-row :gutter="20">
          <el-col :span="24">
            <span
              class="picture-preview"
              @click.stop="picDetails(basicForm.incomingCode)"
              >资质证件照预览</span
            >
            <!-- <span
              class="picture-preview haruyuki-ml-6"
              @click.stop="picUpdate(basicForm.incomingCode)"
              >资质证件照修改</span
            > -->
          </el-col>
        </el-row>
      </div>
      <div class="haruyuki-title haruyuki-size-16">
        <i class="el-icon-postcard"></i
        ><span class="haruyuki-ml-6">{{ posTitle.cardTitle }}</span>
      </div>
      <div class="haruyuki-content">
        <el-row :gutter="20">
          <el-col :span="6">
            <span>结算卡类型：{{ account.balanceAccTypeName }}</span>
          </el-col>
          <el-col :span="6">
            <span
              >开户行省市区：{{ account.openAccProvince }}/{{
                account.openAccCity
              }}/{{ account.openAccArea }}</span
            >
          </el-col>
          <el-col :span="6">
            <span>开户行名称：{{ account.bankName }}</span>
          </el-col>
          <el-col :span="6">
            <span>开户支行名称：{{ account.openAccBankName }}</span>
          </el-col>
          <el-col :span="6">
            <span>结算账户名称：{{ account.balanceAccName }}</span>
          </el-col>
          <el-col :span="6">
            <span>结算账户卡号：{{ account.balanceAccCardNo }}</span>
          </el-col>
          <el-col :span="6">
            <span>银行预留手机号：{{ account.bankMobile }}</span>
          </el-col>
        </el-row>
      </div>
      <!-- <div class="haruyuki-title haruyuki-size-16">
        <i class="el-icon-document-copy"></i
        ><span class="haruyuki-ml-6">{{ posTitle.rateTitle }}</span>
      </div>
      <div class="haruyuki-content">
        <el-row :gutter="20">
          <el-col :span="6">
            <span
              >支付宝签约费率（单位：%）：{{
                exhibition(rateInformation.alipaySignRate)
              }}</span
            >
          </el-col>
          <el-col :span="6">
            <span
              >微信签约费率（单位：%）：{{
                exhibition(rateInformation.wechatSignRate)
              }}</span
            >
          </el-col>
          <el-col :span="6">
            <span
              >云闪付大额贷记卡费率（单位：%）：{{
                exhibition(rateInformation.creditRate1)
              }}</span
            >
          </el-col>
          <el-col :span="6">
            <span
              >云闪付大额借记卡费率（单位：%）：{{
                exhibition(rateInformation.debitRate1)
              }}</span
            >
          </el-col>
          <el-col :span="6">
            <span
              >云闪付小额费率（单位：%）：{{
                exhibition(rateInformation.creditRate2)
              }}</span
            >
          </el-col>
          <el-col :span="6">
            <span
              >云闪付封顶（元）：{{
                exhibition(rateInformation.debitMax2)
              }}</span
            >
          </el-col>
          <el-col :span="6" v-if="rateInformation.codeAdvanceRate">
            <span
              >D0费率（单位：%）：{{ rateInformation.codeAdvanceRate }}</span
            >
          </el-col>
        </el-row>
      </div> -->

      <!-- <div class="haruyuki-title haruyuki-size-16">
        <i class="el-icon-set-up"></i
        ><span class="haruyuki-ml-6">{{ posTitle.allocationTitle }}</span>
      </div>
      <div class="haruyuki-content">
        <el-row :gutter="20">
          <el-col :span="6"> </el-col>
          <el-col :span="6"> </el-col>
        </el-row>
      </div>

      <div class="haruyuki-title haruyuki-size-16">
        <i class="el-icon-cpu"></i
        ><span class="haruyuki-ml-6">{{ posTitle.aisleTitle }}</span>
      </div>
      <div class="haruyuki-content">
        <el-row :gutter="20">
          <el-col :span="6"> </el-col>
          <el-col :span="6"> </el-col>
        </el-row>
      </div>

      <div class="haruyuki-title haruyuki-size-16">
        <i class="el-icon-copy-document"></i
        ><span class="haruyuki-ml-6">{{ posTitle.firmTitle }}</span>
      </div>
      <div class="haruyuki-content">
        <el-row :gutter="20">
          <el-col :span="6"> </el-col>
          <el-col :span="6"> </el-col>
        </el-row>
      </div>

      <div class="haruyuki-title haruyuki-size-16">
        <i class="el-icon-c-scale-to-original"></i
        ><span class="haruyuki-ml-6">{{ posTitle.hardwareTitle }}</span>
      </div>
      <div class="haruyuki-content">
        <el-row :gutter="20">
          <el-col :span="6"> </el-col>
          <el-col :span="6"> </el-col>
        </el-row>
      </div> -->
      <!-- 商户管理 -->
      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-set-up"></i
          ><span class="haruyuki-ml-6">{{ posTitle.merchantTitle }}</span>
        </div>
      </div>
      <div class="haruyuki-content merchant-box">
        <div class="merchant-icon-func" v-for="moduleItem in moduleData" :key="moduleItem.id">
          <div v-if="moduleItem.show">
            <el-image
              class="cursor"
              style="width: 60px; height: 60px"
              :src="moduleItem.image"
              fit="fill"
              @click="moduleOperate(moduleItem.id)"
            ></el-image>
            <div class="cursor">{{ moduleItem.name }}</div>
          </div>
        </div>
      </div>
    </section>

    <el-dialog
      :title="'编辑' + dialogText"
      top="1%"
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
    >
      <template>
        <div class="el-dialog-div" v-show="active == 0">
          <basicForm
            :basicForm="basicForm"
            ref="toBasicForm"
            :isImgShow="false"
          />
        </div>
      </template>
      <template>
        <div v-if="active == 1">
          <cardForm :cardForm="cardForm" ref="toCardForm" />
        </div>
      </template>
      <template>
        <div v-if="active == 2">
          <rateForm :rateForm="rateForm" ref="toRateForm" />
        </div>
      </template>
      <template>
        <div v-if="active == 3">
          <shopForm :shopForm="shopForm" ref="toShopForm" />
        </div>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button
          icon="el-icon-check"
          size="small"
          type="primary"
          v-preventClick
          @click.stop="handleSubmit"
          >提 交</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      :title="'资质证照预览（' + basicForm.legalPersonName + '）'"
      append-to-body
      :visible.sync="imageVisible"
    >
      <template>
        <imagesPreview :merchantForm="merchantForm" ref="toImagesPreview" />
      </template>
    </el-dialog>

    <el-dialog
      :title="'资质证照修改（' + basicForm.legalPersonName + '）'"
      append-to-body
      :visible.sync="imageUpdateVisible"
    >
      <template>
        <imagesUpdate :merchantForm="picUpdateForm" ref="toImagesUpdate" />
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button
          icon="el-icon-check"
          size="small"
          type="primary"
          v-preventClick
          @click.stop="handlePicSubmit"
          >提 交</el-button
        >
      </span>
    </el-dialog>

  </basic-container>
</template>

<script>
import {
  getInfoDetail,
  getPicDetail,
  getPicUpdateDetail,
  basicInformationUpdate,
  updateAllPic,
  groupChange
} from "@/api/rb-merchant/posinfo/pos_info_details";
import basicForm from "@/components/rb-merchant/basic-form";
import cardForm from "@/components/rb-merchant/card-form";
import rateForm from "@/components/rb-merchant/rate-form";
import shopForm from "@/components/rb-merchant/shop-form";
import imagesPreview from "@/components/rb-merchant/images-preview";
import imagesUpdate from "@/components/rb-merchant/images-update";

export default {
  components: {
    basicForm,
    cardForm,
    rateForm,
    shopForm,
    imagesPreview,
    imagesUpdate,
  },
  data() {
    return {
      posTitle: {
        basicTitle: "商户信息",
        cardTitle: "结算信息",
        rateTitle: "费率信息",
        allocationTitle: "基础配置",
        aisleTitle: "支付通道",
        firmTitle: "支付公司",
        hardwareTitle: "硬件设备配置",
        merchantTitle: "商户管理",
      },
      dialogVisible: false,
      dialogType: "", //打开类型 add/edit
      dialogText: "",
      active: 0,
      imageVisible: false,
      imageUpdateVisible: false,
      information: {},
      account: {},
      rateInformation: {},
      basicForm: {
        userType: "",
        industryCode: "",
        mccCd: "",
        userShortName: "",
        handHeld: "",
        cardFront: "",
        cardReverse: "",
        legalPersonName: "",
        crpGender: "",
        legalPersonPhone: "",
        crpProfession: "",
        legalPersonId: "",
        legalPersonIdSdate: "",
        legalPersonIdEdate: "",
        mercProvinceCityArea: [],
        mercProvCode: "",
        mercCityCode: "",
        mercAreaCode: "",
        crpAddr: "",
        licensePic: "",
        businessLicence: "",
        businessLicenceNo: "",
        businessLicenceSDate: "",
        businessLicenceEDate: "",
        contactsName: "",
        contactsPhone: "",
        contactsEmail: "",
        contactsAddr: "",
        remark: "",
      },
      merchantForm: {},
      picUpdateForm: {},
      rpiNo:"",
      moduleData: [
        {
          id: 1,
          name: "门店管理",
          image: "/img/merchant-icon/store.png",
          type: 'store',
          show: true,
        },
        // {
        //   id: 2,
        //   name: "终端管理",
        //   image: "/img/merchant-icon/terminal.png",
        //   type: 'terminal',
        //   show: true,
        // },
        // {
        //   id: 3,
        //   name: "设备管理",
        //   image: "/img/merchant-icon/equipment.png",
        //   type: 'equipment',
        //   show: true,
        // },
        {
          id: 5,
          name: "解除关联集团商户",
          image: "/img/merchant-icon/group.png",
          type: 'group',
          show: true,
        }
      ],
      id:''
    };
  },
  computed: {
    exhibition() {
      return (val) => {
        if (val == "" || val == "-1") {
          return (val = 0);
        } else {
          return val;
        }
      };
    },
  },
  created() {
    this.infoData();
  },
  mounted() {},
  methods: {

    /**
     * @func 商户模块管理
     * @desc 商户模块管理 操作控制
     * */
    moduleOperate(id) {
      switch (id) {
        case 1:
          this.$router.push({
            name: "门店管理",
            query: {
              rpiNo: this.rpiNo
            }
          });
          break;
        case 2:
          this.$router.push({
            name: "终端管理",
            query: {
              rpiNo: this.rpiNo
            }
          });

          break;
        case 3:
          this.$router.push({
            name: "设备管理",
            query: {
              rpiNo: this.rpiNo
            }
          });
          break;
        case 5:
            this.handleBelongerGroup();
            break;
      }
    },
    /**
     * @func 商户模块管理-5(变更归属集团商户)
     * @desc 变更归属集团商户
     * */
    handleBelongerGroup() {
      this.dialogGroupVisible = true;
      this.$confirm('您确定要解除关联集团商户吗?', '瑞生意提示', {
          confirmButtonText: '确认并解除',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.groupSubmit();
        }).catch(() => {

        });
    },
    /**
     * @func 提交已选归属集团商户
     * @desc 提交已选归属集团商户
     * */
    groupSubmit() {
      groupChange({changeType:'2', rpiNo:this.rpiNo}).then(() => {
        this.$message({
            type: "success",
            message: "已解除集团商户关联",
        });
        this.goBack();
      },(error) => {
        this.$message({
          type: "error",
          message: error,
        });
      });
    },
    /* 页面加载 初始化请求详情接口 */
    infoData() {
      this.rpiNo = this.$route.query.rpiNo;
      getInfoDetail(this.rpiNo).then((res) => {
        this.basicForm = res.data.data.informationVO;
        this.account = res.data.data.settlementVO;
        this.rateInformation = res.data.data.rpiStatus;
      });
    },
    handleSubmit() {
      const _this = this;
      if (_this.active == 0) {
        _this.informEditForm();
      } else if (_this.active == 1) {
        // } else if (_this.active == 2) {
        // } else if (_this.active == 3) {
        // } else if (_this.active == 4) {
      }
    },
    handlePicSubmit() {
      updateAllPic(this.picUpdateForm).then(
        (res) => {
          if (res.data.code == "200") {
            this.$message({
              type: "success",
              message: "修改资质证件照成功!",
            });
            this.imageUpdateVisible = false;
          } else {
            this.$message({
              type: "error",
              message: res.data.message,
            });
          }
        },
        (error) => {
          window.console.log(error);
        }
      );
    },
    handleClose(done) {
      this.emptyForm();
      done();
      this.infoData();
    },
    emptyForm() {
      this.$refs["toBasicForm"].$refs["basicForm"].resetFields();
      // this.$refs["toCardForm"].$refs["cardForm"].resetFields();
      // this.$refs["toRateForm"].$refs["rateForm"].resetFields();
      // this.$refs["toShopForm"].$refs["shopForm"].resetFields();
    },
    informEditForm() {
      this.$refs["toBasicForm"].$refs["basicForm"].validate((valid) => {
        if (valid) {
          [
            this.basicForm.mercProvCode,
            this.basicForm.mercCityCode,
            this.basicForm.mercAreaCode,
          ] = this.basicForm.mercProvinceCityArea;
          basicInformationUpdate(this.basicForm).then(
            (res) => {
              if (res.data.code == "200") {
                this.$message({
                  type: "success",
                  message: "修改成功!",
                });
                this.dialogVisible = false;
              } else {
                this.$message({
                  type: "error",
                  message: res.data.message,
                });
              }
            },
            (error) => {
              window.console.log(error);
            }
          );
        } else {
          return false;
        }
      });
    },
    informEdit(id) {
      this.id = id;
      this.dialogVisible = true;
      this.dialogText = "基本信息";
      this.active = 0;
      this.$nextTick(() => {
        // this.$refs["toBasicForm"].isShow = false;
        this.$refs["toBasicForm"].getMccIndustry(this.basicForm.userType);
        this.$refs["toBasicForm"].getMccChildren(this.basicForm.industryCode);
        this.$refs["toBasicForm"].isShow = true;
        this.basicForm.mercProvinceCityArea = [
          this.basicForm.mercProvCode,
          this.basicForm.mercCityCode,
          this.basicForm.mercAreaCode,
        ];
      });
    },
    /* 商户资质证件图片 预览 */
    picDetails(incomingCode) {
      this.imageVisible = true;
      getPicDetail(incomingCode).then((res) => {
        if (res.data.code == "200") {
          this.merchantForm = res.data.data;
        } else {
          this.$message({
            type: "error",
            message: res.data.message,
          });
        }
      });
    },
    /* 商户资质证件图片 修改 */
    picUpdate(incomingCode) {
      this.imageUpdateVisible = true;
      getPicUpdateDetail(incomingCode).then((res) => {
        if (res.data.code == "200") {
          this.picUpdateForm = res.data.data;
          this.picUpdateForm.incomingCode = this.basicForm.incomingCode;
        } else {
          this.$message({
            type: "error",
            message: res.data.message,
          });
        }
      });
    },
    /* 返回页面 */
    goBack() {
      this.$router.$avueRouter.closeTag();
      this.$router.back();
    },
  },
};
</script>

<style lang="scss" scoped>
.picture-preview {
  color: #409eff;
  cursor: pointer;
}

.merchant-title {
  font-weight: bold;
  font-size: 18px;
}

.merchant-box {
  display: flex;
  // justify-content: space-between;
  flex-wrap: wrap;
  &.adaptive {
    width: 100%;
    margin-left: -10px;
    margin-right: -10px;
  }
  .merchant-item-content {
    display: flex;
    flex-direction: column;
    width: calc(100% / 3);
    span {
      padding-left: 10px;
      padding-right: 10px;
      margin-bottom: 8px;
    }
  }
  .merchant-icon-func {
    width: calc(100% / 5);
    margin-bottom: 20px;
    text-align: center;
    .cursor {
      cursor: pointer;
    }
  }
  .merchant-icon-card {
    width: calc(100% / 4);
    .item-card {
      // display: flex;
      border-radius: 10px;
      background-color: #FFFFFF;
      padding: 20px;
      text-align: center;
      margin-left: 10px;
      margin-right: 10px;
      margin-bottom: 10px;
      .item-card-label {
        display: flex;
        align-items: center;
      }
      .item-card-content {
        display: flex;
        align-items: center;
        margin-top: 20px;
      }
    }
  }
}

.mer-m-b-8 {
  margin-bottom: 8px;
}

.img-margin-r10 {
  margin-right: 10px;
}

.info-switch {
  width: calc(100% / 2);
  display: flex;
  justify-content: center;
  font-size: 14px;
  color: #4663FD;
}

.solid {
  &:before {
    content: "｜";
    color: #99a7b1;
  }
}

.feint-input {
  -webkit-appearance: none;
  background-image: none;
  border-radius: 4px;
  // border: 1px solid #DCDFE6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  font-size: inherit;
  outline: 0;
  padding: 0 15px;
  -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  width: 100%;
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  // color: #c0c4cc;
  color: #7f7f7f;
  // cursor: not-allowed;
}
</style>
